import React, { Component } from 'react'
import { Message } from './Message'
import { News } from './News'
import { MyNavLink } from './../MyNavLink'
import { Redirect, Route, Switch } from 'react-router-dom'

export class Home extends Component {
    render() {
        return (
            <div>
                <h3>我是Home的内容</h3>
                <div>
                    <div className="row">
                        <div className="col-xs-6">
                            <div className="panel">
                            <div className="panel-body">
                                <div>
                                <h2>Home组件内容</h2>
                                <div>
                                    <ul className="nav nav-tabs">
                                        <li>
                                            {/* <a className="list-group-item" href="./home-news.html">News</a> */}
                                            <MyNavLink to='/home/news'>News</MyNavLink>
                                        </li>
                                        <li>
                                            {/* <a className="list-group-item " href="./home-message.html">Message</a> */}
                                            <MyNavLink to='/home/message'>Message</MyNavLink>
                                        </li>
                                    </ul>
                                    <Switch>
                                        <Route path='/home/news'  component={News} />
                                        <Route path="/home/message" component={Message} />
                                        <Redirect to='/home/news'  component={News}></Redirect>
                                    </Switch>
                                    {/* <News></News>
                                    <Message></Message> */}
                                </div>
                                </div>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
